.jeditor-container {
    border:1px solid #ccc;
    box-sizing: border-box;
}

.jeditor-container.with-margin {
    background-color: #f2f2f2;
    max-width: 1200px;
}

.jeditor-dragging {
     border:1px dashed #000;
}

.jeditor {
    outline:none;
    word-break: break-word;
}

.jeditor-container.with-margin .jeditor {
    background-color: #fff;
    margin: 80px;
    min-height: 800px;
    padding: 80px;
    max-width: 800px;
}

.jeditor[data-placeholder]:empty:before {
    content: attr(data-placeholder);
    color: lightgray;
}

/** Snippet **/

.jsnippet {
    margin-top:15px;
    cursor:pointer;
    border: 1px solid #ccc;
    position:relative;
}

.jsnippet:focus {
    outline: none;
}

.jsnippet img {
    width:100%;
}

.jsnippet .jsnippet-title {
    padding:15px;
    font-size:1.4em;
}

.jsnippet .jsnippet-description {
    padding-left:15px;
    padding-right:15px;
    font-size:1em;
}

.jsnippet .jsnippet-host {
    padding:15px;
    text-transform:uppercase;
    font-size:0.8em;
    color:#777;
    text-align:right;
}

.jsnippet .jsnippet-url {
    display:none;
}

.jeditor .jsnippet:after {
    content: 'close';
    font-family: 'Material icons';
    font-size: 24px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    cursor: pointer;
    text-shadow: 0px 0px 2px #fff;
    position: absolute;
    top: 12px;
    right: 12px;
}

.jsnippet * {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

.jeditor img {
    border:2px solid transparent;
    box-sizing: border-box;
}

.jeditor img.resizing {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;

    -webkit-user-drag: none;
    -khtml-user-drag: none;
    -moz-user-drag: none;
    -o-user-drag: none;
}

.jeditor img:focus {
    border: 2px solid #0096FD;
    outline: #0096FD;
}

.jeditor .pdf {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cpath style='fill:%23C30B15;' d='M511.344,274.266C511.77,268.231,512,262.143,512,256C512,114.615,397.385,0,256,0S0,114.615,0,256 c0,117.769,79.53,216.949,187.809,246.801L511.344,274.266z'/%3E%3Cpath style='fill:%2385080E;' d='M511.344,274.266L314.991,77.913L119.096,434.087l68.714,68.714C209.522,508.787,232.385,512,256,512 C391.243,512,501.976,407.125,511.344,274.266z'/%3E%3Cpolygon style='fill:%23FFFFFF;' points='278.328,333.913 255.711,77.913 119.096,77.913 119.096,311.652 '/%3E%3Cpolygon style='fill:%23E8E6E6;' points='392.904,311.652 392.904,155.826 337.252,133.565 314.991,77.913 255.711,77.913 256.067,333.913 '/%3E%3Cpolygon style='fill:%23FFFFFF;' points='314.991,155.826 314.991,77.913 392.904,155.826 '/%3E%3Crect x='119.096' y='311.652' style='fill:%23FC0F1A;' width='273.809' height='122.435'/%3E%3Cg%3E%3Cpath style='fill:%23FFFFFF;' d='M204.871,346.387c13.547,0,21.341,6.659,21.341,18.465c0,12.412-7.795,19.601-21.341,19.601h-9.611 v14.909h-13.471v-52.975L204.871,346.387L204.871,346.387z M195.26,373.858h8.93c5.904,0,9.308-2.952,9.308-8.552 c0-5.525-3.406-8.324-9.308-8.324h-8.93V373.858z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M257.928,346.387c16.649,0,28.152,10.746,28.152,26.487c0,15.666-11.655,26.488-28.683,26.488 h-22.25v-52.975H257.928z M248.619,388.615h9.611c8.249,0,14.151-6.357,14.151-15.665c0-9.384-6.205-15.817-14.757-15.817h-9.006 V388.615z'/%3E%3Cpath style='fill:%23FFFFFF;' d='M308.563,356.982v12.26h23.763v10.596h-23.763v19.525h-13.471v-52.975h39.277v10.595h-25.806 V356.982z'/%3E%3C/g%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-size: cover;
    width:60px;
    height:60px;
}

.jeditor-toolbar {
    width: fit-content;
    max-width: 100%;
    box-sizing: border-box;
    margin: 10px;
}

.toolbar-on-top .jeditor-toolbar {
    width: initial;
    margin: 0px;
    box-shadow: 1px 1px 2px rgb(0 0 0 / 10%);
    display: block;
}

.toolbar-on-top .jeditor {
    padding: 15px;
}

.toolbar-on-top .jtoolbar .material-icons {
    font-size: 24px;
    transform: initial;
    margin: 4px;
}

.toolbar-on-top .jtoolbar .jpicker-header {
    font-size: 1em;
    margin-top: 4px;
    margin-bottom: 4px;
}

.jeditor table {
    border-collapse: collapse;
}

.jeditor table td {
    border: 1px solid #bbb;
    height: 2em;
}

.jeditor table td:focus {
    border: 1px solid blue;
}

.jeditor .line-break {
    border-top: 1px dashed #ccc;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

.jeditor .line-break:before {
    content: 'New page';
    background-color: #fff;
    color: #ccc;
    margin: -1em;
    padding: 6px;
    position: absolute;
}